<template>
    <scroll-view style="background-color: #f8f8f8">
        <div class="card">
            <div class="row" style="justify-content: space-between; width: 100%">
                <text class="statustext">退款成功</text>
                <div class="withdraw">撤销退款申请</div>
            </div>
            <div style="height: 5px"></div>
            <div class="divider"></div>
            <div style="height: 5px"></div>

            <div class="row" style="justify-content: space-between; width: 100%">
                <text class="textkkk">退款金额</text>
                <text class="textahskjdhjk">200</text>
            </div>
            <div class="row" style="justify-content: space-between; width: 100%">
                <text class="textkkk">退款账户</text>
                <text class="textkkk">支付宝</text>
            </div>
            <div class="row" style="justify-content: center; width: 100%" @click="call">
                <div style="display: flex; flex-direction: column; align-items: center">
                    <uni-icons type="phone"></uni-icons>
                    <text>联系商家</text>
                </div>
            </div>
        </div>
        <div class="dividerH"></div>
        <div class="card">
            <div>
                <text class="statustext">退款流程</text>
            </div>
            <uni-steps
                :options="list2"
                active-color="#007AFF"
                :active="active"
                direction="column"
            />
        </div>
        <div class="dividerH"></div>
        <div class="card">
            <div>
                <text class="statustext">退款信息</text>
            </div>
            <div class="divider"></div>
            <div class="row" style="align-items: start">
                <image
                    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.cn_mIqJN0Td_0Ono0xMEsQHaLL?rs=1&pid=ImgDetMain"
                    mode="aspectFill"
                    style="width: 200px; height: 80px"
                ></image>
                <div style="width: 10px"></div>
                <div style="display: flex; flex-direction: column">
                    <div style="font-size: 12px; font-weight: bold">
                        商业的 [乌卡时代]，我们如何重塑商业价值-
                        WAWARDS金网奖2023年商业计划领航秀峰会
                    </div>
                    <TimePlace></TimePlace>
                </div>
            </div>
            <div class="row" style="justify-content: space-between; width: 100%">
                <text>退款金额</text>
                <text>￥200（2张）</text>
            </div>
            <div class="divider"></div>
            <div class="row" style="justify-content: space-between; width: 100%">
                <text>退款单号</text>
                <text class="grey11111">11111111111</text>
            </div>
            <div class="row" style="justify-content: space-between; width: 100%">
                <text>退款原因</text>
                <text class="grey11111">11111111111</text>
                <div class="row" style="flex-wrap: wrap">
                    <image
                        src="https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0"
                        style="width: 100px; height: 80px"
                    ></image>
                    <image
                        src="https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0"
                        style="width: 100px; height: 80px"
                    ></image>
                    <image
                        src="https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0"
                        style="width: 100px; height: 80px"
                    ></image>
                    <image
                        src="https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0"
                        style="width: 100px; height: 80px"
                    ></image>
                    <image
                        src="https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0"
                        style="width: 100px; height: 80px"
                    ></image>
                </div>
            </div>
        </div>
    </scroll-view>
</template>

<script setup lang="ts">
import { onLaunch, onShow, onHide, onLoad } from '@dcloudio/uni-app'
import TimePlace from '@/activityPages/components/time-place.vue'
const list2 = [
    {
        title: '买家下单',
        desc: '2018-11-11'
    },
    {
        title: '卖家发货',
        desc: '2018-11-12'
    },
    {
        title: '买家签收',
        desc: '2018-11-13'
    },
    {
        title: '交易完成',
        desc: '2018-11-14'
    }
]
let params = {}
onLoad((e) => {
    console.log('refund detail load,e=', e)
    params = e
})
function call() {
    uni.makePhoneCall({
        phoneNumber: '12312312313',
        success: () => {
            console.log('拨打电话成功！')
        },
        fail: () => {
            console.error('拨打电话失败！')
        }
    })
}
</script>

<style scoped lang="scss">
@import url('@/activityPages/style/card.css');
.grey11111 {
    font-size: 12px;
    color: grey;
}
.statustext {
    color: rgb(16, 16, 16);
    font-size: 18px;
    font-weight: bold;
}
.textahskjdhjk {
    color: rgba(51, 51, 51, 1);
    font-size: 20px;
    font-weight: bold;
}
.withdraw {
    padding: 5px;
    border-radius: 4px;
    background-color: rgba(241, 157, 57, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 12px;
    text-align: center;
}

.textkkk {
    color: rgb(16, 16, 16);
    font-size: 16px;
}
</style>
